<template>
  <div class="cart">
    <nav-bar class="cart-nav">
      <div slot="center">购物车</div>
    </nav-bar>
    <scroll class="wrapper">

      <div class="cart-container" v-for="(item,index) of cartProducts" :key="index">

        <van-checkbox checked-color=" var(--color-tint)" @click="singleHandler" class="lt" v-model="item.checked"></van-checkbox>

        <van-card class="gt"
                  :num="item.num"
                  :price="item.price.substr(0)"
                  :desc="item.desc"
                  :title="item.title"
                  :thumb="item.image"
        ></van-card>
      </div>


      <van-empty v-show="cartProducts.length==0" description="购物车竟然是空的">
        <van-button @click="btnClick" color="var(--color-tint)" round type="danger" class="bottom-button">去逛逛
        </van-button>
      </van-empty>
    </scroll>

    <van-submit-bar :disabled="disabled" class="bar" :price="totalPrice" button-text="提交订单" @submit="onSubmit">
      <van-checkbox checked-color=" var(--color-tint)" @click="allHandler" v-model="checked">全选</van-checkbox>
    </van-submit-bar>

    <van-notify style="padding:12px 16px" v-model="show" type="success">
      <van-icon name="bell" style="margin-right: 4px;"/>
      <span>购买成功</span>
    </van-notify>
  </div>
</template>

<script>
  import {mapState, mapMutations} from "vuex"
  import NavBar from "@/components/common/navbar/NavBar";
  import Scroll from "@/components/common/scroll/Scroll";

  export default {
    name: "Cart",

    data() {
      return {
        cartProducts: [],
        checked: false,
        disabled: true,
        totalPrice: 0,
        show: false
      }
    },
    methods: {
      ...mapMutations(["clearProduct"]),
      btnClick() {
        this.$router.replace("/home");
      },
      //计算价格
      calculation() {
        //每次有按钮点击了选择框的话，统计当前选中得商品价格
        let total = 0;
        this.cartProducts.forEach(item => {
          if (item.checked) {
            total += (parseFloat(item.price) * item.num);
          }
        });
        this.totalPrice = total * 100;
      },
      //单选按钮
      singleHandler() {
        //判断当前是否处于全选

        //如果所有都已被选择，则全选按钮选中
        if (this.cartProducts.every(item => item.checked)) {
          this.checked = true;
        }

        //如果有没被选择的（哪怕只是一个），则全选按钮不选
        if (this.cartProducts.some(item => !item.checked)) {
          this.checked = false;
        }

        //计算价格
        this.calculation();

      },
      //全选按钮
      allHandler() {
        this.cartProducts = this.products.map(item => {
          item.checked = this.checked;
          return item;
        });
        //计算价格
        this.calculation();
      },
      //提交按钮
      onSubmit() {

        //把那些选中的商品从vuex中删除

        // 1-1 留下未选中的
        this.cartProducts = this.cartProducts.filter(item => !item.checked);
        this.checked = false;
        this.totalPrice = 0;
        // 1-2
        // 从vuex中删除
        this.clearProduct();

        this.$toast.loading({
          duration: 2000, // 持续展示 toast
          forbidClick: true,
          message: '提交中...',
          onClose: () => {
            this.show = true;
            setTimeout(() => {
              this.show = false;
            }, 2000);
          }
        });
        // console.log(this.cartProducts)


      },
    },
    mounted() {

      this.cartProducts = this.products;
      // 我的购物车页面是切换即销毁的
      // 每次加载该页面所有商品选中状态置空
      this.cartProducts = this.cartProducts.map(item => {
        item.checked = false;
        return item;
      });

    },
    computed: {
      ...mapState(["products"])
    },
    watch: {
      totalPrice(value) {
        if (value > 0) {
          // console.log("按钮可用了")
          this.disabled = null;
        } else {
          this.disabled = true;
        }
      }
    },
    components: {
      NavBar, Scroll
    }
  }
</script>

<style scoped>
  .cart {
    /*视口*/
    height: 100vh;

  }

  .cart-nav {
    background-color: var(--color-tint);
    color: #fff;
  }

  .wrapper {
    position: absolute;
    top: 44px;
    bottom: 99px;
    left: 0;
    right: 0;
    overflow: hidden;

  }

  .cart-container {
    width: 100%;
    display: flex;
    justify-content: center;

  }

  .lt {
    width: 10%;
  }


  .gt {
    width: 80%;
  }

  .bar {
    position: fixed;
    bottom: 50px;
  }


</style>
